<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px">
      <el-step title="填写课程基本信息" />

      <el-step title="创建课程大纲" />

      <el-step title="发布课程" />
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseVo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写" />
      </el-form-item>
      <!-- 所属分类 TODO -->
      <!--分类二级联动效果-->
      <!--一级分类-->
      <el-form-item label="课程分类">
        <el-select
          v-model="courseVo.subjectParentId"
          placeholder="请选择分类"
          @change="subjectLevelOneChanged"
        >
          <el-option
            v-for="subject in subjectOneList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>
        <!--二级分类-->
        <el-select v-model="courseVo.subjectId" placeholder="请选择分类">
          <el-option
            v-for="subject in subjectTwoList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>
      </el-form-item>

      <!--下拉框组件-->
      <el-form-item label="课程讲师">
        <el-select v-model="courseVo.teacherId" placeholder="请选择">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number
          :min="0"
          v-model="courseVo.lessonNum"
          controls-position="right"
          placeholder="请填写课程的总课时数"
        />
      </el-form-item>

      <!-- 课程简介 TODO -->
      <!-- 课程简介-->
      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseVo.description" />
      </el-form-item>

      <!-- 课程封面 上传组件 
      show-file-list-显示文件列表 on-sunccess-上传成功 before-upload-上传之前 action：调用接口
      -->
      <el-form-item label="课程封面">
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_API + '/eduoss/fileoss/upload'"
          class="avatar-uploader"
        >
          <img :src="courseVo.cover" />
        </el-upload>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="courseVo.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"
        />元
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import course from "@/api/course/course";
//引入subject.js
import subject from "@/api/subject/subject";
//引入富文本编辑器组件
import Tinymce from "@/components/Tinymce";
export default {
  //声明组件
  components: {
    Tinymce
  },

  data() {
    return {
      saveBtnDisabled: false, // 保存按钮是否禁用
      courseVo: {
        title: "",
        subjectId: "",
        teacherId: "",
        lessonNum: 0,
        description: "",
        cover: "/static/01.png",
        price: 0
      },
      teacherList: [], //封装所有讲师列表
      subjectOneList: [], //课程分类的1级分类
      subjectTwoList: [], //课程分类的2级分类
      BASE_API: process.env.BASE_API, //接口API地址
      courseId: "" //定义一个courseId方便后续传值
    };
  },
  created() {
    this.init()
  },
  methods: {
    //初始化的方法
    init() {
      //获取路由中的id值
      if (this.$route.params && this.$route.params.id) {
        this.courseId = this.$route.params.id;
        //调用根据id查询课程信息回显的方法
        this.getInfo();
      } else {
        //如果路由中没有id值代表是添加操作
        //添加操作先清空表单数据
        this.courseVo ={
        title: "",
        subjectId: "",
        teacherId: "",
        lessonNum: 0,
        description: "",
        cover: "/static/01.png",
        price: 0
      };
        //初始化讲师列表
        this.getListTeacher();
        //初始化课程列表获取1级分类
        this.getCourceList();
      }
    },
    //1.判断添加或修改的方法
    saveOrUpdate() {
     //根据是否有id值进行判断做添加还是修改
     if(!this.courseVo.id){ //没有id就做添加
        this.addCourse()
     }else{   //有id就做修改
        this.updateCourse()
     }
    },
    //2.查询所有讲师
    getListTeacher() {
      course
        .getListTeacher()
        .then(response => {
          //console.log(response.data)
          this.teacherList = response.data.list;
        })
        .catch(error => {});
    },
    //3.查询所有课程1级分类,可以复用之前课程列表获取的方法
    getCourceList() {
      subject
        .getSubjectList()
        .then(response => {
          //console.log(response);
          this.subjectOneList = response.data.list;
        })
        .catch(error => {});
    },
    //4.重点：查询所有课程2级分类,在1级分类绑定一个@change事件:当1级分类发生变化的事件改变2级分类的内容
    subjectLevelOneChanged(value) {
      //这里的value指的是1级分类的ID,Vue框架可以使用value来传值
      //alert(value)
      //循环1级分类并取出1级分类中的2级分类
      for (var i = 0; i < this.subjectOneList.length; i++) {
        //获取每一个1级分类
        var ontSubject = this.subjectOneList[i];
        //判断如果传来的value和查出来的1级分类ID相等，那么就取出它里面的所有2级分类
        if (value === ontSubject.id) {
          this.subjectTwoList = ontSubject.children; //children是后端定义的
          //每次重选选择1级分类的时候，清空2级分类，否则每次重新选择1级分类的时候还有上一次的2级分类的值
          //清空2级分类的subjectId
          this.courseVo.subjectId = "";
        }
      }
    },
    //5.上传封面成功调用的方法
    handleAvatarSuccess(res, file) {
      //file是图片
      console.log(res.data.url);
      this.courseVo.cover = res.data.url;
    },
    //6.上传封面之前调用的方法,规定图片格式和大小
    beforeAvatarUpload(file) {
      //file-图片
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是JPG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过2MB!");
      }
      return isJPG && isLt2M;
    },
    //7.当进入chapter页面点击上一步返回此页面时，数据回显，根据courseId查询课程信息
    getInfo() {
      course
        .getCourseInfo(this.courseId)
        .then(response => {
          //courseVo包含课程基本信息{包含1级分类和2级分类}
          this.courseVo = response.data.courseInfo;
          //调用查询课程列表的方法
          subject
            .getSubjectList()
            .then(res => {
              //给1级分类赋值
              this.subjectOneList = res.data.list;
              //遍历所有1级分类
              for (var i = 0; i < this.subjectOneList.length; i++) {
                //获取每一个1级分类
                var oneSubject = this.subjectOneList[i];
                //比较获取每一个1级分类中的id和当前CourseVo中的id
                if (this.courseVo.subjectParentId == oneSubject.id) {
                  //如果CourseVo中的id和查询出来oneSubject中的id相等，就获取下面的2级分类
                  this.subjectTwoList = oneSubject.children;
                }
              }
            })
            .catch(error => {});
          //初始化讲师列表：因为created中如果做修改就没有初始化讲师的方法,因此在这里初始化
          this.getListTeacher();
        })
        .catch(error => {});
    },
    //8.添加课程信息
    addCourse(){
       course
        .addCourse(this.courseVo)
        .then(response => {
          //提示添加成功
          this.$message({
            type: "success",
            message: "添加课程信息成功!"
          });
          //路由跳转到下一步创建课程大纲,这里获取后端传来的课程id
          this.$router.push({
            path: "/course/chapter/" + response.data.courseId
          });
        })
        .catch(error => {});
    },
    //9.修改课程信息
    updateCourse(){
      course.updateCourseInfo(this.courseVo)
            .then(response=>{
              //提示信息
              this.$message({
                type:'success',
                message:'修改课程信息成功'
              })
              //修改完成后跳转到章节页面
              this.$router.push({path:'/course/chapter/'+this.courseId})
            })
            .catch(error=>{
            })
    }
  }
};
</script>
<!--富文本框样式
scoped-只在当前页面有效
-->
<style scoped>
.tinymce-container {
  line-height: 30px;
}
</style>